<HTML>

<HEAD>

<TITLE>onbeforeunload Demo 3</TITLE>

<script language="JavaScript">
	var ids = new Array('name', 'gender', 'sendEmail', 'radVanilla',
			'radChocolate', 'radStrawberry');

	var values = new Array('', '', '', '', '', '');

	function populateArrays()

	{

		// assign the default values to the items in the values array

		for ( var i = 0; i < ids.length; i++)

		{

			var elem = document.getElementById(ids[i]);

			if (elem)

				if (elem.type == 'checkbox' || elem.type == 'radio')

					values[i] = elem.checked;

				else

					values[i] = elem.value;

		}

	}

	var needToConfirm = true;

	window.onbeforeunload = confirmExit;

	function confirmExit()

	{

		if (needToConfirm)

		{

			// check to see if any changes to the data entry fields have been made

			for ( var i = 0; i < values.length; i++)

			{

				var elem = document.getElementById(ids[i]);

				if (elem)

					if ((elem.type == 'checkbox' || elem.type == 'radio')

					&& values[i] != elem.checked)

						return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";

					else if (!(elem.type == 'checkbox' || elem.type == 'radio')
							&&

							elem.value != values[i])

						return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";

			}

			// no changes - return nothing

		}

	}
</script>

</HEAD>

<BODY>



	<h1>
		<code>onbeforeunload</code>
		Demo 3
	</h1>

	This demo illustrates how to use two JavaScript arrays to hold the IDs
	and values of the form field entries, so that the user is shown the
	confirmation dialog box only when exiting the page after they have made
	changes to the form field entries.

	<p>Here are some links you can click to leave this page. Note that
		if you are visiting with Internet Explorer or FireFox 0.9 or higher,
		you'll be asked if you really want to leave this page. This also works
		when closing the browser.
	<ul>

		<li><a href="http://scottonwriting.net/">ScottOnWriting.NET</a>
			(my blog)</li>

		<li><a href="http://www.google.com/">Google</a>
		</li>

		<li><a href="http://www.nbaweblog.com/nba/">NBAWebLog.com</a>
		</li>

	</ul>

	Notice that if you do not change any of these values, and attempt to
	leave the page, you can leave without having to see the confirmation
	dialog box. If, however, you make a change to one of these values,
	navigating to another page (or closing the browser) will prompt you to
	see if you really want to leave without saving).

	<form id=form1 name=form1>

		<b>What is your name:</b> <input type="text" id="name" name="name" /><br />

		<b>What is your gender?</b> <select id="gender" name="gender">

			<option value="Male">Male</option>

			<option value="Female">Female</option>

		</select><br /> <input type="checkbox" name="sendEmail" id="sendEmail" /> <b>Send
			me your newsletter!</b> <br /> <b>What is your favorite type of ice
			cream?</b><br /> <input type="radio" id="radVanilla" name="iceCream"
			checked="checked" /> Vanilla<br /> <input type="radio"
			id="radChocolate" name="iceCream" /> Chocolate<br /> <input
			type="radio" id="radStrawberry" name="iceCream" /> Strawberry<br />

		<p>

			<input type="Submit" value="Save" onclick="needToConfirm = false;"
				 id=Submit1 name=Submit1>
	</form>

	<script language="JavaScript">
		populateArrays();
	</script>

</BODY>

</HTML>
